<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="tfn" uri="http://www.totoro.com/functions" %>
<!--
产品中间细节详情，重要，包含显示产品sku spu
2021/5/14
-->
<html>
<head>
    <title>Title</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body, button, input, select, textarea {
        font: 12px/1.5 tahoma, arial, "\5b8b\4f53";
        line-height: 1.5;
        font-family: tahoma, arial, "宋体";
    }
</style>
<body>
<!-- content start -->
<div id="page">
    <div id="content">
        <!-- shop-si start -->
        <div id="hd" class="tb-shop" data-sid="${shop.id}">
            <div class="layout grid-m J_TLayout" style=" text-align: center;">
                <c:if test="${fn:length(shop.shopImage) > 0}">
                    <img src="/static/img/seller/shop/${shop.shopImage}">
                </c:if>
            </div>
        </div>
        <!-- shop-si end -->
        <!-- product-content start -->
        <div id="detail" style="width: 1190px !important;">
            <div id="J_DetailMeta" class="tm-detail-meta tm-clear">
                <div class="tm-clear">
                    <div class="tb-property">
                        <div class="tb-warp" style="margin: 0 0 0 460px;color: #666;padding: 0 0 10px;">
                            <div class="tb-detail-hd">
                                <input type="hidden" disabled style="display: none; visibility: hidden" value="${param.skuCode}" id="skuCode">
                                <h1>
                                    ${product.productName}
                                </h1>
                                <p class="newp">初上市价${product.beforePrice!=0.0?product.beforePrice:product.nowPrice}元</p>
                            </div>
                            <div class="tm-fcs-panel">
                                <dl class="tm-price-panel tm-price-cur">
                                    <dt class="tb-metatit">价格</dt>
                                    <dd>
                                        <em class="tm-yen">￥</em>
                                        <span class="tm-price">${product.nowPrice * product.productDiscount}</span>
                                        <div class="staticPromoTip">
                                            <!-- rullBanner ids:$ids true -->
                                        </div>
                                    </dd>
                                </dl>
                                <!-- 促销价，可显示隐藏 -->
                                <dl class="tm-promo-panel" style='display: ${product.isActivity=="1"?"block":"none"}'>
                                    <dt class="tb-metatit">促销价</dt>
                                    <dd>
                                        <em class="tm-yen">￥</em>
                                        <span class="tm-price">${product.nowPrice * product.activityDiscount}</span>
                                        <div class="staticPromoTip">
                                            <!-- rullBanner ids:$ids true -->
                                        </div>
                                    </dd>
                                </dl>
                            </div>
                            <div class="tb-meta">
                                <dl class="tm-delivery-panel">
                                    <dt class="tb-metatit">卖家地</dt>
                                    <dd>
                                        <div class="tb-postAge">
                                            <span class="mui-addr-tri">
                                                <span style="font-size: 12px">
                                                    ${fn:length(shop.address) > 0?shop.address:'无'}
                                                </span>
                                            </span>
                                        </div>
                                    </dd>
                                </dl>
                            </div>
                            <ul class="tm-ind-panel">
                                <li class="tm-ind-item tm-ind-sellCount">
                                    <div class="tm-indcon">
                                        <span class="tm-label">月销量</span>
                                        <span class="tm-count">${product.productMonthDeal.count}</span>
                                    </div>
                                </li>
                                <li class="tm-ind-item tm-ind-reviewCount canClick tm-line3">
                                    <div class="tm-indcom">
                                        <span class="tm-label">累计评价</span>
                                        <span class="tm-count">${product.commentCount}</span>
                                    </div>
                                </li>
                                <li class="tm-ind-item tm-ind-emPointCount">
                                    <div class="tm-indcon">
                                        <a href="#" target="_blank">
                                            <span class="tm-label">送天猫积分</span>
                                            <span class="tm-count" id="tm-integral">${productSku.productPrice / 10.0}</span>
                                        </a>
                                    </div>
                                </li>
                            </ul>
                            <div class="tb-key">
                                <div class="tb-skin">
                                    <p class="tb-note-title">请选择您要的商品信息<b class="J_PanelCloser" data-spm-anchor-id="a220o.1000855.0.i2.70fa237b20c3mL">x</b></p>
                                    <div class="tb-sku">
                                        <dl class="tb-amount tm-clear">
                                            <dt class="tb-metatit">数量</dt>
                                            <dd>
                                                <span class="tb-amount-widget mui-amount-warp">
                                                    <input class="tb-text mui-amount-input" type="text" value="1"
                                                           title="请输入购买量" id="buy-count">

                                                    <span class="mui-amount-btn">
                                                        <span class="mui-amount-increase iconfont icon-shangjiantou1"></span>
                                                        <span class="mui-amount-decrease iconfont icon-jiantou9"
                                                              data-spm-anchor-id="a220o.1000855.0.i3.2a581438rEHMnS"></span>
                                                    </span>
                                                    <span class="mui-amount-unit">件</span>
                                                    <em id="skuStock" class="tb-hidden" style="display: inline;">库存${productSku.productStock}件</em>
                                                </span>
                                            </dd>
                                        </dl>

                                        <div class="tm-clear" id="beyond" style="display: none">
                                            <div class="ui-msg">
                                                <div class="ui-msg-con ui-msg-stop">您所填写的商品数量超过库存！
                                                    <i class="ui-msg-icon iconfont icon-chaoguo"></i>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="tb-action tm-clear">
                                            <!-- buy -->
                                            <div class="tb-btn-buy tb-btn-sku">
                                                <a rel="nofollow" title="点击此按钮，到下一步确认购买信息。" role="button" id="J_LinkBuy">
                                                    立即购买
                                                    <span class="ensureText">确认</span>
                                                </a>
                                            </div>
                                            <!-- add cart -->
                                            <div class="tb-btn-basket tb-btn-sku">
                                                <a rel="nofollow" role="button" id="J_LinkBasket">
                                                    <i class="iconfont icon-gouwuche_"></i>
                                                    加入购物车
                                                    <span class="ensureText">确认</span>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--  服务承诺 start-->
                            <div class="tm-ser tm-clear">
                                <dl class="tm-clear">
                                    <dt class="tb-metatit">服务承诺</dt>
                                    <dd class="tm-laysku-dd">
                                        <ul class="tb-serPromise">
                                            <li>
                                                <a href="//rule.tmall.com/tdetail-9530.htm?spm=a2177.7731966.0.0.606fc32fX3FPA7"
                                                   title="购买天猫商品时选择购买“意外保修”后，在服务保障期内如消费者购买的商品正常使用过程中出现意外导致机器性能故障（无自行拆装,非人为故意损坏），由消费者发起申请，由天猫负责委派第三方服务商在消费者的服务保障额度范围内为消费者提供维修的保障服务项目。服务保障额度等于消费者购买该商品时支付的实际成交金额。"
                                                   target="_blank">
                                                    意外保修
                                                </a></li>
                                            <li><a href="//pages.tmall.com/wow/fushi/act/statementofdelivery"
                                                   title="天猫运动户外大型健身器材承诺送货入户，如未履行服务天猫将按照规则处罚商家" target="_blank">
                                                送货入户
                                            </a></li>
                                            <li><a href="//rule.tmall.com/tdetail-4400.htm" title="商品支持正品保障服务"
                                                   target="_blank">
                                                正品保证
                                            </a></li>
                                            <li>
                                                <a href="//rule.tmall.com/tdetail-9531.htm?spm=a2177.7731966.0.0.606fc32fd1MfEU"
                                                   title="购买天猫商品时选择购买“全面保修”后，在服务保障期内如消费者购买的商品正常使用过程中出现三包范围内的性能故障以及意外导致机器性能故障（无自行拆装,非人为故意损坏），由天猫负责委派第三方服务商在消费者的服务保障额度范围内为消费者提供维修的保障服务项目"
                                                   target="_blank">
                                                    全面保修
                                                </a></li>
                                            <li>
                                                <a href="//www.tmall.com/wow/tmall-3c/act/new-serve?spm=a222t.8014944.fuxq0.12.sZr2BD&amp;wh_isdetail=true&amp;wh_service_id=1&amp;wh_content_id=3&amp;wh_default_id=0"
                                                   title="天猫电器延保服务，全国联保结束后天猫为电器继续延长服务保障期，为影响正常使用的性能故障提供维修"
                                                   target="_blank">
                                                    延保服务
                                                </a></li>
                                            <li><a href="//pages.tmall.com/wow/fushi/15995/fitnessinsurance"
                                                   title="买家因意外/新冠病毒感染的肺炎导致身故/残疾，可由保险公司赔付，最高赔付2万元" target="_blank">
                                                意外保障
                                            </a></li>
                                            <li>
                                                <a href="//vip.tmall.com/vip/privilege.htm?spm=3.1000588.0.141.2a0ae8&amp;priv=speed"
                                                   title="极速退款是为诚信会员提供的退款退货流程的专享特权，额度是根据每个用户当前的信誉评级情况而定"
                                                   target="_blank">
                                                    极速退款
                                                </a></li>
                                            <li><a href="//pages.tmall.com/wow/seller/act/seven-day" title="七天无理由退换"
                                                   target="_blank">
                                                七天无理由退换
                                            </a></li>
                                        </ul>
                                    </dd>
                                </dl>
                                <div class="tm-pay-box">
                                    <div class="tm-pay">
                                        <em class="pay-title"
                                            style="font-size: 12px;color: #666;position: relative;z-index: 2;">支付方式</em>
                                        <em class="pay-toggler iconfont icon-jiantou9" title="显示所有信息"
                                            style="display: inline;font-size: 11px;color: #666;position: relative;z-index: 2"></em>
                                        <div data-spm="1998099674" class="pay-credit J_Paylist"
                                             data-spm-anchor-id="a220o.1000855.0.1998099674.37db34d3XbklWg"
                                             style="width: 165px">
                                            <a title="支持使用信用卡支付" target="_blank"
                                               href="//payservice.alipay.com/intro/index.htm?c=xyk">信用卡
                                                <s style="background: url(//img.alicdn.com/tps/i4/TB1gNG3JpXXXXbcXVXXAz6UFXXX-16-16.png) no-repeat center center;"></s>
                                            </a>
                                            <a title="支持用绑定了支付宝的银行卡付款"
                                               href="//payservice.alipay.com/intro/index.htm?c=kjzf" target="_blank">快捷支付
                                                <s style="background: url(//gtms04.alicdn.com/tps/i4/TB1fnvXJpXXXXcTXpXXAz6UFXXX-16-16.png) no-repeat center center;"></s>
                                            </a>
                                            <a title="免费利用花呗额度支付，下月10号还款"
                                               href="//payservice.alipay.com/intro/index.htm?c=hb" target="_blank">蚂蚁花呗
                                                <s style="background: url(//gtms03.alicdn.com/tps/i3/TB1rf58JpXXXXc5XFXXAz6UFXXX-16-16.png) no-repeat center center;"></s>
                                            </a>
                                            <a title="支持使用余额宝付款，边赚边花"
                                               href="//payservice.alipay.com/intro/index.htm?c=yeb" target="_blank">余额宝
                                                <s style="background: url(//gtms02.alicdn.com/tps/i2/TB1HAHaJpXXXXX0XFXXAz6UFXXX-16-16.png) no-repeat center center;"></s>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--  服务承诺 end-->
                            <!-- 网络环境检测 start-->
                            <div class="" style="margin:0 10px;color:#999">
                                检测到您当前处于非安全网络环境，部分商品信息可能不准确，请在交易支付页面再次确认商品价格信息。
                            </div>
                            <!-- 网络环境检测 end-->
                        </div>
                    </div>
                </div>
                <div class="tb-gallery">
                    <div class="tb-booth">
                            <span class="zoomIcon iconfont icon-sousuo"></span>
                            <span class="ks-imagezoom-warp">
                                <img id="J_ImgBooth" alt="${product.productName}"
                                     src="${product.productImages[0].imagePath}">
                                <span style="position: absolute; top: 0; left: 0; width: 218.405px; height: 218.405px; display: none;" class="ks-imagezoom-lens"></span>
                            </span>
                    </div>
                    <!-- image change start -->
                    <div class="tb-thumb-warp">
                        <div class="tb-thumb-content">
                            <ul class="tb-thumb tm-clear" style="left: 0px">
                                <c:forEach items="${product.productImages}" var="productImage" varStatus="vs">
                                    <c:if test="${vs.first}">
                                        <li class="tb-selected">
                                    </c:if>
                                    <c:if test="${!vs.first}">
                                        <li>
                                    </c:if>
                                        <a>
                                            <img src="${productImage.imagePath}"
                                                 alt="商品预览图" width="60" height="60">
                                        </a>
                                    </li>
                                </c:forEach>
                            </ul>
                            <!-- image change end -->
                        </div>
                    </div>
                    <p class="tm-action tm-clear">
                        <span id="J_EditItem">
                            <a href=""
                                target="_blank" data-spm-anchor-id="a220o.1000855.1997427645.2">举报</a></span>
                        <c:if test="${isCollect}">
                            <span id="cancelCollect" href="" class="favorite">
                                <i class="iconfont icon-star" style="color: greenyellow"></i>
                                <span>取消收藏</span>
                            </span>
                        </c:if>
                        <c:if test="${!isCollect}">
                            <span id="collectProduct" href="" class="favorite">
                                <i class="iconfont icon-star"></i>
                                <span>收藏商品</span>
                            </span>
                        </c:if>
                        <!-- ruleBanner-->
                        <span id="J_CollectCount" data-count="${product.collectCount}">（${product.collectCount}人气）</span>
                    </p>
                </div>
                <!-- 该表单为隐藏提交数据 -->
                <form id="sku-form" name="bigForm" method="post" action="#">

                </form>
                <!--  看了又看 start -->
                <div id="ald-skuRight" class="ald-skuRight ald ald-03054" data-spm="1998025129">
                    <div class="ald-inner ald-showTitle">
                        <div class="ald-hd "><s></s><span>看了又看</span></div>
                        <div class="ald-carousel">
                            <div class="wrapCon">
                                <ul class="ald-switchable-content showTitle" style="position: absolute; top: 0px">
                                    <c:forEach items="${otherProducts}" var="product">
                                        <li class="ks-switchable-panel-internal1932" style="display: block;">
                                            <div class="img"><a class="ALDCLS-act" tabindex="-1"
                                                                title="${product.productName}"
                                                                href="/buy.htm?pid=${product.id}"
                                                                target="_blank">
                                                <img src="${product.productImages.get(0).imagePath}">
                                            </a>
                                                <p class="look_price">¥${tfn:formatNumber(product.nowPrice, 2)}</p></div>
                                            <p class="look_title">
                                                <a class="ALDCLS-act"
                                                   href="/buy.htm?pid=${product.id}"
                                                   target="_blank">${product.productName}</a></p>
                                        </li>
                                    </c:forEach>
                                </ul>
                            </div>
                            <ul class="ald-switchable-trigger">
                                <li class="ald-switchable-prev-btn">上一个
                                </li>
                                <li class="ald-switchable-next-btn">下一个
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!--  看了又看 end -->
            </div>


        </div>
        <!-- product-content end -->
    </div>
</div>
<!-- content end -->

<!-- 商品放大后效果 start -->

<div id="ks-component1312" class="ks-overlay ks-imagezoom-viewer ks-overlay-hidden" style="width: 418px;height: 430px;left: 815.5px;top: 302px;display: block;z-index: 1000;">
    <div id="ks-content-ks-component1312" class="ks-overlay-content">
        <img src="https://img.alicdn.com/imgextra/i1/4260076097/O1CN01fTaWZk1uuTUJfFo9Y_!!4260076097.png" style="position: absolute; left: 0; top: 0; width: 750px; height: 1000px;">
    </div>
</div>
<input type="hidden" value="${pid}" id="pid"/>

<!-- 商品放大后效果 end -->

<!-- add Cart -->
<div class="J_detail_cart_layer" style="top: 515px; left: 887.5px; display: none;">
    <i class="suc-icon"></i>
    <div class="inner">
        <div class="title">成功加入购物车！<span class="close">×</span>
        </div>
        <div class="content">
            <p>您可以<a href="/cart.htm" target="_blank">去购物车结算</a>，或先使用
                <a class="active" href="//www.tmall.com/wow/portal/act/app-download?scm=1048.1.12.11" target="_blank">天猫APP</a>
                领取新用户福利礼包
                <a href="//www.tmall.com/wow/portal/act/app-download?scm=1048.1.12.8" target="_blank">立即下载天猫APP</a>
            </p>
        </div>
    </div>
</div>
</body>
<script src="${pageContext.request.contextPath}/static/js/self/product/primaryInfo.js"></script>
</html>
